<template>
	<view class="">
		<view class="complaint" v-for="(item,index) in list " :key="index" @click="complaintdetail(item.id)">
			<u-icon name="email" 
			color="#289cbb" 
			size="60rpx" 
			:label="item.taskName"
			labelPos="right"
			/>
			<view class="display">
				<view class="">申诉日期 {{item.createTime}}</view>
				<view class="state">
					<view class="" style="margin-right: 20rpx;">状态</view>
					<u-tag plain :text="item.state== 1 ? '未处理' : '已处理'"
					:type="item.state == 1 ? 'warning' :'success'" size='20rpx'/>
				</view>
			</view>
		</view>
		<u-empty
				marginTop="100"
				:show="list.length==0"
		        mode="list"
				iconSize="120"
		/>
		
	</view>
	
</template>

<script lang="ts" setup>
import { complaintList } from "@/apis/my"
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { reactive, ref, watch} from "vue";
	const complaintListData = reactive({
		page: 1,
		limit: 10,
	})
	const list = ref<any>([])
	let isOver = false
	getList()
	function getList(){
		complaintList(complaintListData).then((res)=>{
			isOver = res.list.length === 0;
			list.value = res.list
		})
	}
	onPullDownRefresh(()=>{
		 setTimeout(function () {
			getList()
		 	uni.stopPullDownRefresh();
		}, 500);
	})
	
	onReachBottom(()=>{
		 if (isOver){
		 		return;
		 	}
		 complaintListData.page++
	})
	watch(complaintListData,()=>{
		getList()
	})
	function complaintdetail(id: any){
		uni.navigateTo({
			url:"/pages/my/complaintdetail?id=" + id
		})
	}
</script>

<style>
.state{
		display: flex;
		flex-wrap: wrap;
	}
.display{
	    line-height: 40rpx;
		color: #cccc;
		line-height: 40rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.complaint{
		padding: 20rpx;
		margin: 15rpx;
		background-color: #fff;
	}
	page {
	  height: 100%;
	  overflow: hidden;
	  background-color: #f3f3f3;
	}
</style>
